<template>
  <div class="home-list-container">
    <div class="sestion1">
      <div class="list-flex">
        <Item></Item>
      </div>
      <div class="list-flex">
        <Item></Item>
      </div>
      <div class="list-flex">
        <Item></Item>
      </div>
      <div class="list-flex">
        <Item></Item>
      </div>
    </div>
    <div class="sestion2">
      <div class="list-flex">
        <Item></Item>
      </div>
      <div class="list-flex">
        <Item></Item>
      </div>
      <div class="list-flex">
        <Item></Item>
      </div>
      <div class="list-flex">
        <Item></Item>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import Item from "./item.vue";
</script>
<style lang="scss">
.home-list-container {
  display: flex;
  padding: 0 20px;

  .list-flex {
    height: 520px;
  }

  .sestion2 {
    margin-left: 20px;
  }
  .sestion1,
  .sestion2 {
    flex: 1;
  }
}
</style>
